<script setup>
import apps from "@/config/application.js";
import {onMounted, ref} from "vue";
import http from "@/util/http-util.js";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";
const router=useRoute();
const rout=useRouter();
const notice =ref({

});


const goHome = ()=>{
  rout.push('/consume')
}

const req = ref({
    id: undefined
})

const ping = ref({
  noticeId:undefined,
  introduce:undefined,
})

const loadData = ()=>{
  http.GET("/consume/notice-detail",req.value).then(rep=>{
    if (rep.code == 0){
      notice.value = rep.data;
    }
  })
}
const pingList = ref([])


const loadPing = ()=>{
  http.GET("/consume/pinglun-list",req.value).then(rep=>{
    if (rep.code == 0){
      pingList.value = rep.data
    }
  })
}


const submit = ()=>{
  http.POST("/consume/pinglun",ping.value).then(rep=>{
    if (rep.code == 0){
      ping.value.introduce = undefined;
      loadPing();
      ElMessage.success("评论成功！")
    }
  })
}


onMounted(()=>{
  req.value.id = router.query.id;
  ping.value.noticeId = router.query.id;
  loadData();
  loadPing();
})

</script>

<template>
  <div class="notice-detail">
    <!-- 顶部导航 -->
    <div class="detail-header">
      <div class="header-left">
        <el-image :src="apps.icon" class="logo-image" />
        <span class="brand-name">{{apps.name}}</span>
        <div class="back-btn" @click="goHome">
          <el-icon><ArrowLeft /></el-icon>
          返回首页
        </div>
      </div>
    </div>

    <div class="detail-container">
      <!-- 左侧公告内容 -->
      <div class="content-section">
        <div class="article-container">
          <h1 class="article-title">{{notice.title}}</h1>
          
          <div class="article-meta">
            <span class="publish-time">
              <el-icon><Timer /></el-icon>
              发布时间：{{ notice.createTime }}
            </span>
            <span class="view-count">
              <el-icon><View /></el-icon>
              {{ notice.visit }} 次浏览
            </span>
          </div>

          <div v-if="notice.pic && notice.pic.length > 0" class="article-image">
            <el-image 
              :src="http.genUrl(notice.pic)" 
              fit="cover"
              :preview-src-list="[http.genUrl(notice.pic)]"
            />
          </div>

          <div class="article-content">
            {{notice.content}}
          </div>
        </div>
      </div>

      <!-- 右侧评论区 -->
      <div class="comments-section">
        <div class="comments-container">
          <div class="comments-header">
            <h3>
              <el-icon><ChatDotRound /></el-icon>
              评论区
            </h3>
            <span class="comment-count">{{ pingList.length }} 条评论</span>
          </div>

          <div class="comments-list">
            <template v-if="pingList.length > 0">
              <div v-for="(p,k) in pingList" :key="k" class="comment-item">
                <div class="comment-user">
                  <el-avatar 
                    :src="p.sex == 1 ? '/nan.jpg' : '/nv.jpg'" 
                    :size="36"
                  >
                    {{p.name.substring(0,1)}}
                  </el-avatar>
                  <div class="user-info">
                    <span class="username">{{p.name}}</span>
                    <span class="comment-time">{{p.createTime}}</span>
                  </div>
                </div>
                <div class="comment-content">
                  {{p.introduce}}
                </div>
              </div>
            </template>
            <el-empty 
              v-else 
              description="暂无评论" 
              :image-size="120"
            />
          </div>

          <div class="comment-input">
            <el-input
              v-model="ping.introduce"
              type="textarea"
              :rows="3"
              placeholder="写下你的评论..."
              resize="none"
            />
            <el-button 
              type="primary" 
              class="submit-btn" 
              @click="submit"
              :disabled="!ping.introduce"
            >
              发表评论
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.notice-detail {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

.detail-header {
  padding: 20px 40px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-image {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.brand-name {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #f2f6fc;
  border-radius: 20px;
  color: #409EFF;
  cursor: pointer;
  transition: all 0.3s;
}

.back-btn:hover {
  background: #ecf5ff;
}

.detail-container {
  flex: 1;
  max-width: 1400px;
  margin: 30px auto;
  padding: 0 20px;
  display: flex;
  gap: 30px;
  min-height: 0;
}

.content-section {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.article-container {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  overflow-y: auto;
}

.article-title {
  font-size: 28px;
  color: #303133;
  margin: 0 0 20px 0;
  line-height: 1.4;
}

.article-meta {
  display: flex;
  gap: 20px;
  color: #909399;
  font-size: 14px;
  margin-bottom: 24px;
}

.publish-time, .view-count {
  display: flex;
  align-items: center;
  gap: 4px;
}

.article-image {
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
}

.article-image .el-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.article-content {
  color: #606266;
  line-height: 1.8;
  font-size: 16px;
}

.comments-section {
  width: 400px;
  min-width: 400px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.comments-container {
  position: sticky;
  top: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 140px);
  height: auto;
}

.comments-header {
  padding: 20px;
  border-bottom: 1px solid #EBEEF5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.comments-header h3 {
  margin: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #303133;
}

.comment-count {
  color: #909399;
  font-size: 14px;
}

.comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: #909399 #f5f7fa;
}

.comments-list::-webkit-scrollbar {
  width: 6px;
}

.comments-list::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 3px;
}

.comments-list::-webkit-scrollbar-thumb {
  background-color: #909399;
  border-radius: 3px;
}

.comment-item {
  margin-bottom: 24px;
}

.comment-item:last-child {
  margin-bottom: 0;
}

.comment-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.comment-time {
  font-size: 12px;
  color: #909399;
}

.comment-content {
  margin-left: 48px;
  padding: 12px 16px;
  background: #f5f7fa;
  border-radius: 8px;
  color: #606266;
  line-height: 1.6;
}

.comment-input {
  padding: 20px;
  border-top: 1px solid #EBEEF5;
  flex-shrink: 0;
  background: #fff;
}

.submit-btn {
  width: 100%;
  margin-top: 12px;
  height: 40px;
}

@media screen and (max-width: 1200px) {
  .detail-container {
    flex-direction: column;
    gap: 20px;
  }

  .comments-section {
    width: 100%;
    min-width: 0;
  }

  .comments-container {
    position: relative;
    top: 0;
    max-height: 600px;
  }
}

@media screen and (max-width: 768px) {
  .detail-container {
    padding: 0 10px;
    margin: 20px auto;
  }

  .article-container {
    padding: 20px;
  }

  .article-title {
    font-size: 24px;
  }

  .comments-container {
    max-height: 500px;
  }
}
</style>